<!-- 首页 -->
<template>
  <div class="vue-box cdf" v-if="sa.isAuth('console-plate')">
    <!-- ------------ 第一栏 - 统计数据 ------------- -->
    <div class="s-row">
      <el-row :gutter="15">
          <el-col :span="14" >
            <div class="cdf" style="height: 100%;">
              <com-welcome></com-welcome>
              <com-data :data="data.data"></com-data>
              <com-task :taskList="data.data1"></com-task>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="cdf" style="height: 100%;">
              <!-- <com-news :newsList="data.data2"></com-news> -->
              <com-notice :noticeList="data.data3"></com-notice>
            </div>
          </el-col>
      </el-row>
    </div>
  </div>
  <!-- 无控制台权限时显示 -->
  <div v-else>
    <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #000">
      <div style="text-align: center">
        <h1>您暂无权限查看，请重新登录</h1>
        <div style="height: 100px"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="home">
import ComWelcome from './com-welcome'
import comData from './com-data'
import comNotice from './com-notice'
import comNews from './com-news'
import comTask from './com-task'

const data = reactive({
  data: '',
  data1: '',
  data2: '',
  data3: '',
})
// 组件加载时触发
onMounted(() => {
    f5();
})
// ------------------ 查找数据 ------------------
const f5 = function() {
  let params = {}
  sa.ajax('/api/webOnlineInquiry/workbench', params, function(res) {
    console.log(res);
    if(res.code == '1') {
      data.data1 = res.data1;
      data.data2 = res.data2;
      data.data3 = res.data3;
      data.data = res.data;
    }
  });
};

</script>

<style scoped lang="scss">
.vue-box {
  margin: 0;
  padding: 15px 15px;
  height: 100%;
  gap: 15px;
}
:deep(.el-card) {
  border-radius: 0px;
  border: 1px #ddd solid;
  margin-bottom: 14px;
}

.s-row {
  
}
.s-row-1 {
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.s-row-2 :deep(*) {
  ///* margin-top: -10px; */
  .el-card .el-card__body {
    height: 250px;
  }
  .bt-box .el-card .el-card__body {
    height: 360px;
    padding: 0px;
  }
  /* .s-row-2 .bt-cell-box .el-card .el-card__body{} */
  /* .s-row-2 .bt-cell-box .el-card{overflow: visible;} */
  .bt-cell-box .el-card__header {
    position: relative;
    z-index: 10;
  }
}

.s-row-3 :deep(*) {
  .el-card {
    /* height: 100%; */
  }
  .el-alert {
    margin-bottom: 14px;
  }
}

.echarts-div {
  height: 100%;
}
.com-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  ::v-deep {
    .card-title {
      font-weight: 600;
      font-size: 18px;
    }
  }
}
</style>
